import React, {useRef} from 'react';
import { myMatter } from "./matterUtil.ts";
import { useEffect, useState } from 'react';
// import { View, Dimensions } from 'react-native';
import { Engine, Render, Runner, Bodies, World, Composite, MouseConstraint, Events, Composites, Constraint, Vertices, Svg, Matter } from 'matter-js';
import "./index.less";

const matterDemo: React.FC = () => {

  // const [content, setContent] = useState('')
  const matterContent = useRef<HTMLDivElement>(null)
  const [coords, setCoords] = useState({coordsX: 0, coordsY: 0});
  const {innerWidth, innerHeight} = window;


  useEffect(()=>{
    // if(matterContent.current){


      // 创建自己封装的matter对象
      const matter = myMatter(matterContent.current, Render, Runner, Bodies, World, Engine, Composite, MouseConstraint);

      const box = matter.addBox(600, 0, 20, 20, {});

    // }

    // unmount
    return () => {
      // destroy Matter
      Render.stop(matter.render.render)
      World.clear(matter.engine.current.world)
      Engine.clear(matter.engine.current)
      matter.render.canvas.remove()
      matter.render.canvas = null
      matter.render.context = null
      matter.render.textures = {}
    }
  },[innerHeight, innerWidth])






  return(
    <div id="content">
      {/*<div onClick={handleMouseMove} id="content"/>*/}
      <div ref={matterContent}/>
    </div>
  )

};

export default matterDemo;
